{extend name="inherit/list" /}

{block name="title"}文件存储{/block}

{block name="head"}
<style>
    .layui-input-inline {
        width: 400px !important;
    }

    .layui-form-label {
        width: 150px;
    }

    .layui-input-block {
        margin-left: 180px;
    }
</style>
{/block}

{block name="content"}
<div class="layui-card-body" style="min-height: 420px;padding-top: 30px;">
    <div class="layui-row">
        <div class="layui-col-md12">
            <form class="layui-form" action="">
                <div class="layui-form-item">
                    <label class="layui-form-label">存储类型</label>
                    <div class="layui-input-block">
                        <input type="radio" name="type" value="0" lay-filter="type" title="本地服务器" {$storageType==0
                            ?='checked' }>
                        <input type="radio" name="type" value="1" lay-filter="type" title="七牛云 Kodo" {$storageType==1
                            ?='checked' }>
                        <input type="radio" name="type" value="2" lay-filter="type" title="阿里云 OSS" {$storageType==2
                            ?='checked' }>
                        <input type="radio" name="type" value="3" lay-filter="type" title="腾讯云 COS" {$storageType==3
                            ?='checked' }>
                    </div>
                </div>
            </form>
            <form class="layui-form type-form type-0" action="" style="{$storageType == 0 ? '' : 'display: none'}">
                <div class="layui-form-item">
                    <label class="layui-form-label">本地存储</label>
                    <div class="layui-input-inline">
                        <input type="text" value="文件存储在本地服务器" required lay-verify="required" autocomplete="off"
                            class="layui-input" readonly>
                    </div>
                    <div class="layui-form-mid layui-word-aux">本地存储</div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">存放目录</label>
                    <div class="layui-input-inline">
                        <input type="text" value="{$localPath}" required lay-verify="required" autocomplete="off"
                            class="layui-input" readonly>
                    </div>
                    <div class="layui-form-mid layui-word-aux">本地存储</div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <input type="hidden" name="id" value="{$local.id}">
                        <button class="layui-btn" lay-submit lay-filter="save">保存</button>
                        <button type="reset" class="layui-btn layui-btn-primary">取消</button>
                    </div>
                </div>
            </form>
            <form class="layui-form type-form type-1" action="" style="{$storageType == 1 ? '' : 'display: none'}">
                <div class="layui-form-item">
                    <label class="layui-form-label">bucket</label>
                    <div class="layui-input-inline">
                        <input type="text" name="bucket" value="{$kodo.bucket}" required lay-verify="required"
                            lay-verType="tips" autocomplete="off" class="layui-input" placeholder="请输入七牛云空间名称">
                    </div>
                    <div class="layui-form-mid layui-word-aux">七牛云 Kodo</div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">访问域名</label>
                    <div class="layui-input-inline">
                        <input type="text" name="domain" value="{$kodo.domain}" required lay-verify="required"
                            lay-verType="tips" autocomplete="off" class="layui-input" placeholder="请输入自定义CDN访问域名">
                    </div>
                    <div class="layui-form-mid layui-word-aux">七牛云 Kodo</div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">AccessKey</label>
                    <div class="layui-input-inline">
                        <input type="text" name="accessKey" value="{$kodo.accessKey}" required lay-verify="required"
                            lay-verType="tips" autocomplete="off" class="layui-input" placeholder="请输入七牛云AccessKey">
                    </div>
                    <div class="layui-form-mid layui-word-aux">七牛云 Kodo</div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">SecretKey</label>
                    <div class="layui-input-inline">
                        <input type="text" name="secretKey" value="{$kodo.secretKey}" required lay-verify="required"
                            lay-verType="tips" autocomplete="off" class="layui-input" placeholder="请输入七牛云SecretKey">
                    </div>
                    <div class="layui-form-mid layui-word-aux">七牛云 Kodo</div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <input type="hidden" name="id" value="{$kodo.id}">
                        <button class="layui-btn" lay-submit lay-filter="save">保存</button>
                        <button type="reset" class="layui-btn layui-btn-primary">取消</button>
                    </div>
                </div>
            </form>
            <form class="layui-form type-form type-2" action="" style="{$storageType == 2 ? '' : 'display: none'}">
                <div class="layui-form-item">
                    <label class="layui-form-label">bucket</label>
                    <div class="layui-input-inline">
                        <input type="text" name="bucket" value="{$oss.bucket}" required lay-verify="required"
                            placeholder="请输入阿里云OSS空间名称" autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-form-mid layui-word-aux">阿里云 OSS</div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">endpoint</label>
                    <div class="layui-input-inline">
                        <input type="text" name="endpoint" value="{$oss.endpoint}" required lay-verify="required"
                            placeholder="请输入阿里云OSS外网地址,如:oss-cn-beijing.aliyuncs.com" autocomplete="off"
                            class="layui-input">
                    </div>
                    <div class="layui-form-mid layui-word-aux">阿里云 OSS</div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">访问域名</label>
                    <div class="layui-input-inline">
                        <input type="text" name="domain" value="{$oss.domain}" required lay-verify="required"
                            placeholder="请输入自定义CDN加速域名" autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-form-mid layui-word-aux">阿里云 OSS</div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">AccessKey</label>
                    <div class="layui-input-inline">
                        <input type="text" name="accessKey" value="{$oss.accessKey}" required lay-verify="required"
                            placeholder="请输入阿里云用户AccessKey" autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-form-mid layui-word-aux">阿里云 OSS</div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">SecretKey</label>
                    <div class="layui-input-inline">
                        <input type="text" name="secretKey" value="{$oss.secretKey}" required lay-verify="required"
                            placeholder="请输入阿里云用户SecretKey" autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-form-mid layui-word-aux">阿里云 OSS</div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <input type="hidden" name="id" value="{$oss.id}">
                        <button class="layui-btn" lay-submit lay-filter="save">保存</button>
                        <button type="reset" class="layui-btn layui-btn-primary">取消</button>
                    </div>
                </div>
            </form>
            <form class="layui-form type-form type-3" action="" style="{$storageType == 3 ? '' : 'display: none'}">
                <div class="layui-form-item">
                    <label class="layui-form-label">存储桶名称(bucket)</label>
                    <div class="layui-input-inline">
                        <input type="text" name="bucket" value="{$cos.bucket}" required lay-verify="required"
                            placeholder="请输入存储桶名称 格式：BucketName-APPID" autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-form-mid layui-word-aux">腾讯云 COS</div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">存储桶地域(region)</label>
                    <div class="layui-input-inline">
                        <input type="text" name="region" value="{$cos.region}" required lay-verify="required"
                            placeholder="请输入存储桶区域,示例: ap-beijing" autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-form-mid layui-word-aux">腾讯云 COS</div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">云API密钥 SecretId</label>
                    <div class="layui-input-inline">
                        <input type="text" name="accessKey" value="{$cos.accessKey}" required lay-verify="required"
                            placeholder="请输入云API密钥 SecretId" autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-form-mid layui-word-aux">腾讯云 COS</div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">云API密钥 SecretKey</label>
                    <div class="layui-input-inline">
                        <input type="text" name="secretKey" value="{$cos.secretKey}" required lay-verify="required"
                            placeholder="请输入云API密钥 SecretKey" autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-form-mid layui-word-aux">腾讯云 COS</div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">自定义CDN加速域名</label>
                    <div class="layui-input-inline">
                        <input type="text" name="domain" value="{$cos.domain}" placeholder="选填项, 省略时使用默认源站域名"
                            autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-form-mid layui-word-aux">腾讯云 COS</div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <input type="hidden" name="id" value="{$cos.id}">
                        <button class="layui-btn" lay-submit lay-filter="save">保存</button>
                        <button type="reset" class="layui-btn layui-btn-primary">取消</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
{/block}

{block name="foot"}
<script>
    layui.config({
        base: '__layuiadmin__/' //静态资源所在路径
        , version: (new Date).getTime()
    }).extend({
        index: 'lib/index' //主入口模块
        , request: 'plugin/request'
    }).use(['index', 'form', 'request'], () => {
        var form = layui.form
            , request = layui.request
            , $ = layui.$;
        form.on('radio(type)', function (data) {
            var type = data.value
            $('.type-form').hide()
            $('.type-' + type).show()
        });
        form.on('submit(save)', function (data) {
            let loading = parent.layer.load();

            request.ajax("{:u('update')}", 'post', 'json', {
                data: data.field
            }, res => {
                request.log(res)
                parent.layer.close(loading);
                parent.layer.msg(res.msg, {
                    time: 1200
                    , anim: 0
                }, () => {
                    res.code == 200 && location.reload();
                })
            })
            return false;
        });
    });
</script>
{/block}